<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form
        :model="query"
        :inline="true"
        size="mini"
        label-position="right"
        label-width="70px"
      >
        <el-form-item label="考试类型" prop="exaType">
          <el-select v-model="query.exaType" placeholder="请选择考试类型">
            <el-option
              v-for="item in testType"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学段">
          <el-select v-model="query.schoolSection" clearable>
            <el-option label="小学" value="小学" />
            <el-option label="初中" value="初中" />
            <el-option label="高中" value="高中" />
            <el-option label="幼儿园" value="幼儿园" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="exaType">
          <el-input v-model="query.phone" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="练习日期">
          <el-date-picker
            v-model="query.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            plain
            @click="getList()"
            >查询</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            @click="query = { pageNo: 1, pageSize: 20, total: 0 }"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="真题" name="0" />
      <el-tab-pane label="模拟题" name="1" />
      <el-tab-pane label="章节练习" name="2" />
    </el-tabs>
    <el-table
      v-loading="listLoading"
      :data="list"
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        min-width="200px"
        align="center"
        :show-overflow-tooltip="true"
        label="昵称"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.name"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="130px"
        align="center"
        :show-overflow-tooltip="true"
        label="手机号"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.phone"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="考试类型"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.exaType"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="学段"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.schoolSection"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="地区"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.area"></span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="activeName == 0"
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="练习真题卷数"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.realTestSum"></span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="activeName == 0"
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="完成真题卷总题目数"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.realTestQuestionSum"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        v-if="activeName == 0"
        align="center"
        :show-overflow-tooltip="true"
        label="真题卷平均完成率"
      >
        <template slot-scope="scope">
          {{scope.row.realTestCompleteInterestRate|to100}}
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 0"
        :show-overflow-tooltip="true"
        label="真题卷平均正确率"
      >
        <template slot-scope="scope">
          {{scope.row.realTestTrueInterestRate|to100}}
        </template>
      </el-table-column>
      <el-table-column
        v-if="activeName == 1"
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="练习模拟题卷数"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.mockTestSum"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 1"
        :show-overflow-tooltip="true"
        label="完成模拟题总题目数"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.mockTestQuestionSum"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 1"
        :show-overflow-tooltip="true"
        label="模拟卷平均完成率"
      >
        <template slot-scope="scope">
          {{scope.row.mockTestCompleteInterestRate|to100}}
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 1"
        :show-overflow-tooltip="true"
        label="模拟卷平均正确率"
      >
        <template slot-scope="scope">
          {{scope.row.mockTestTrueInterestRate|to100}}
        </template>
      </el-table-column>

      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 2"
        :show-overflow-tooltip="true"
        label="章节练习题数"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.sectionTestSum"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 2"
        :show-overflow-tooltip="true"
        label="完成章节练习总题目数"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.sectionTestQuestionSum"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 2"
        :show-overflow-tooltip="true"
        label="章节练习平均完成率"
      >
        <template slot-scope="scope">
          {{scope.row.sectionTestCompleteInterestRate|to100}}
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        v-if="activeName == 2"
        :show-overflow-tooltip="true"
        label="章节练习平均正确率"
      >
        <template slot-scope="scope">
         {{scope.row.sectionTestTrueInterestRate|to100}}
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="注册时间"
      >
        <template slot-scope="scope">
          {{ scope.row.ctime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/StatisticsUserInfo',
              query: {
                id: scope.row.id,
              },
            }"
          >
            <el-button type="primary" size="mini">查看</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.pageSize"
      :total="query.total"
      layout="total, sizes, prev, pager, next, jumper"
      background
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
import waves from "@/directive/waves";
import { getTestTypeList } from "@/api/testType.js";
import { getUserQuestionInfoList } from "@/api/statistical.js";
export default {
  name: "StatisticsQuestionList",
  directives: { waves },
  data() {
    return {
      activeName: 0,
      testType: [],
      listLoading: false,
      list: [],
      query: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  filters: {
    parseTime(time) {
      return parseTime(time);
    },
     to100(res) {
      return parseInt(res*100)+"%";
    },
  },
  created() {
    this.getTestType();
    this.getList();
  },
  methods: {
    getTestType() {
      getTestTypeList().then((res) => (this.testType = res.data));
    },
    getList() {
      this.listLoading = true;
      if (!this.query.time) {
        delete this.query.time;
      }
      getUserQuestionInfoList(this.query).then((res) => {
        this.list = res.data;
        this.query.total = res.page.total;
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.pageNo = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.getList();
    },
  },
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
.el-table .success-row {
  color: #dcdfe6;
}
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.page {
  margin-top: 10px;
}

.icon-star {
  margin-right: 2px;
}

.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.show-d {
  margin-top: 15px;
}
</style>
